<template>
  <div id="zb_app">
    <!-- 头部 -->
    <header>
      <!-- 返回按钮 -->
      <van-nav-bar title="商品分类" left-text left-arrow @click-left="$router.go(-1)" />
      <!-- 搜索框 -->
      <van-search v-model="keyword" placeholder="请输入要搜索的商品" @click="$router.push('/searchList')"/>
    </header>
    <!-- 主要区域 -->
    <section>
      <!-- 左侧导航栏 -->
      <van-sidebar v-model="activeKey" @change="zb_changeNav">
        <van-sidebar-item v-for="(item,key) in zb_nav" :key="key" :title="item.cat_name" />
      </van-sidebar>
      <!-- 右侧商品主要区域 -->
      <div class="zb_main">
        <!-- 加载效果 -->
        <van-loading size="24px" v-if="loading==true">加载中...</van-loading>
        <!-- 商品列表数据 -->
        <ul class="zb_goods" v-else>
          <li v-for="(item,index) in zb_goodsList" :key="index">
            <img v-lazy="item.goodsLogo" />
            <div class="goods-num">已售{{item.goodsBuyNum | sellCountFilter }}件</div>
            <div class="goods-name">{{item.goodsName}}</div>
            <div class="goods-price">
              <span style="color:red;">￥{{item.goodsPrice}}</span>
              <span style="color:#999;">☆{{item.goodsFav}}</span>
            </div>
            <div class="old-price">{{item.goodsOldPrice}}</div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
//引入 轮播图懒加载
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      keyword: "", //搜索关键字
      activeKey: 0, //左侧导航栏 高亮显示
      zb_nav: [], //左侧导航栏
      zb_name: "帆布鞋", //左侧分类选中的名字
      zb_goodsList: [], //商品列表数据源
      loading: true //加载状态
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //获取商品数据
    getList() {
      this.$axios
        .get(
          `http://www.hj0819.top:44369/api/Goods/getGoods?goodsName=${this.zb_name}&page=1&pageSize=20&sortType=new`
        )
        .then(res => {
          console.log(res);
          this.zb_goodsList = res.data.data;
          //获取到数据 关闭加载中
          this.loading = false;
        });
    },
    //点击左侧导航切换，修改当前高亮菜单为name值
    zb_changeNav(index) {
      // console.log(index);
      //加载中
      this.loading = true;
      //根据name索引 下标查找
      this.zb_name = this.zb_nav[index].cat_name;
      // console.log(this.zb_name);
      //刷新商品列表
      this.getList();
    }
  },
  //进行数据的处理
  filters: {
    sellCountFilter(value) {
      let rselt = value;
      if (value > 10000) {
        rselt = (rselt / 10000).toFixed(1) + "万";
      }
      return rselt;
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    //获取左侧导航栏
    this.$axios
      .get("http://www.hj0819.top:44369/api/Goods/getCatsTree")
      .then(res => {
        // console.log(res);
        this.zb_nav = res.data.data;
      });

    //调用商品列表
    this.getList();
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
#zb_app {
  width: 100%;
  height: 100%;
  header {
    width: 100%;
    height: 100px;
    //搜索框
    .van-search {
      height: 40px;
      width: 100%;
      border: 1px solid #999;
      border-radius: 2px;
      margin-top: 3px;
    }
  }
  section {
    width: 100%;
    display: flex;
    //左侧导航栏
    .van-sidebar {
      width: 25%;
      padding: 10px;
    }
    //右侧主要区域
    .zb_main {
      width: 75%;
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      //商品列表
      .zb_goods {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 49%;
          height: 200px;
          padding: 5px;
          position: relative;
          img {
            width: 100%;
            height: 130px;
            border-radius: 5px;
          }
          .goods-name {
            width: 100%;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
          }
          .goods-num {
            width: 80px;
            font-size: 14px;
            border-radius: 2px;
            color: white;
            background: rgba(30, 30, 30, 0.6);
            position: absolute;
            top: 120px;
            z-index: 3;
          }
          .goods-price {
            display: flex;
            justify-content: space-around;
          }
          .old-price {
            text-decoration: line-through;
            font-size: 10px;
            margin-left: 5px;
            color: #9999;
          }
        }
      }
    }
  }
}
</style>
